<template>
  <div name="HistoryList">
    <el-card>
      <span style="margin-right: 1em">请选择学期: </span>
      <el-select
        v-model="semester"
        placeholder="请选择学期"
        @change="changeSemester"
      >
        <el-option
          v-for="item in semesterList"
          :key="item.value"
          :label="item.value"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-table :data="list" style="width: 100%">
        <el-table-column label="课程类型" prop="courseType"> </el-table-column>
        <el-table-column label="课程名称" prop="courseName"> </el-table-column>
        <el-table-column label="授课地点" prop="courseName"> </el-table-column>
        <el-table-column label="授课教师" prop="tName"> </el-table-column>
        <el-table-column label="听课时间">
          <template slot-scope="scope">
            <span>
              {{ scope.row.listenDay }} 第{{
                scope.row.listenTimeArray.join("、")
              }}节</span
            >
          </template>
        </el-table-column>
        <el-table-column align="right">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="showInfo(scope.row.id)"
              type="primary"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        layout="prev, pager, next"
        :total="allNumber"
        @current-change="getList"
        @prev-click="getList"
        @next-click="getList"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { getSemesterInfo } from "../../api/dictionaries";
import { loadList } from "../../api/data";
export default {
  name: "HistoryList",
  props: {},
  components: {},
  data() {
    return {
      show: false,
      semester: null,
      // 学期
      semesterList: [],
      // 排序
      sort: [
        { text: "随机顺序", value: 0 },
        { text: "时间顺序", value: 1 },
        { text: "时间倒序", value: 2 },
      ],
      // 当前学期
      Semester: 0,
      // 排序
      Sort: 0,
      currentPage: 1,
      allNumber: 0,
      // 历史听课列表
      list: null,
    };
  },
  created() {
    // this.reload();
  },
  mounted() {
    this.fetchSemesterList();
    this.fetchHistoryList();
  },
  methods: {
    getList(val) {
      this.currentPage = val;
      this.fetchHistoryList();
    },
    showInfo(id) {
      this.$router.push(`/historyDetails/${id}`);
    },
    changeSemester(val) {
      this.semester = val;
      this.currentPage = 1;
      this.fetchHistoryList();
    },
    async fetchSemesterList() {
      let { data: res } = await getSemesterInfo();
      let semesterArr = res.result;
      semesterArr.forEach((item) => {
        item.text = item.name;
        item.value = item.name;
      });
      this.semesterList = semesterArr;
      this.semester = semesterArr[0].value;
    },

    async fetchHistoryList() {
      const res = await loadList(1, this.currentPage, 10, this.semester);
      if (res.status === 200) {
        this.allNumber = res.data.count;
        this.list = res.data.data;
      }
    },
  },
};
</script>

<style scoped>
.el-pagination {
  margin-left: 2em;
  margin-top: 1em;
  margin-bottom: 2em;
}
</style>
